<template>
  <inline-Modal
    :visible="visible"
    :title="title"
    @ok="$emit('ok')"
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item class="hiddenItem">
          <!-- uuid隐藏 -->
          <a-input v-decorator="['uuid']" disabled type="hidden" />
        </a-form-item>
        <a-card title="基本信息" :bordered="false" style="width: 100%">
          <a-row>
            <a-col span="12">
              <a-form-item
                label="上级公司"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <!-- url="/mdata/organization/getTreeSysOrganizationCompany" -->
                <depart-popup
                  placeholder="请选择上级公司"
                  url="/mdata/organization/getTreeSysOrganizationTop"
                  v-decorator="[
                    'pid',
                    { rules: [{ required: true, message: '请选择上级公司' }] },
                  ]"
                ></depart-popup>
                <!-- <a-input v-decorator="['org_id',{rules: [{required: true,message: '请选择上级公司'}]}]" allowClear
												 placeholder="请选择上级公司"/> -->
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="公司名称"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="[
                    'orgName',
                    { rules: [{ required: true, message: '请输入公司名称' }] },
                  ]"
                  allowClear
                  placeholder="请输入公司名称"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="公司负责人"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <!-- <a-input v-decorator="['org_person',{rules: [{required: true,message: '请输入公司简称'}]}]" placeholder="请选择公司负责人"/> -->
                <personnel-popup
                  placeholder="请选择公司负责人"
                  v-decorator="[
                    'orgPerson',
                    {
                      rules: [{ required: false, message: '请选择公司负责人' }],
                    },
                  ]"
                ></personnel-popup>
              </a-form-item>
            </a-col>
            <a-col span="12" v-show="false">
              <a-form-item
                label="公司编码"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="[
                    'orgCode',
                    { rules: [{ required: false, message: '请输入公司编码' }] },
                  ]"
                  allowClear
                  placeholder="请输入公司编码"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="排序"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input-number
                  v-decorator="['orgSort']"
                  :min="1"
                  placeholder="请输入排序"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item
                label="公司简称"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="['orgAbbreviation']"
                  allowClear
                  placeholder="请输入公司简称"
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label="公司电话"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <!-- {
                          pattern: /(^1\d{10}$|^(0\d{2,3}-?|0\d2,3)?[1-9]\d{4,7}(-\d{1,8})?$)/,
                          message: '请输入正确的电话号码！',
                        }, -->
                <a-input
                  v-decorator="[
                    'orgTelephone',
                    {
                      rules: [],
                    },
                  ]"
                  placeholder="请输入公司电话"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col span="12">
              <a-form-item
                label="公司官网"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="['orgOfficialWebsite']"
                  placeholder="请输入公司官网"
                />
              </a-form-item>
            </a-col>

            <a-col span="12">
              <a-form-item
                label="公司邮箱"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <!-- rules: [
                        {
                          pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                          message: '请输入正确的邮箱！',
                        },
                      ], -->
                <a-input
                  v-decorator="['orgEmail', {}]"
                  placeholder="请输入公司邮箱"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col span="24">
              <a-form-item
                label="公司地址"
                :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
              >
                <a-input
                  v-decorator="['orgAddress']"
                  placeholder="请输入公司地址"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="24">
              <a-form-item
                label="简介"
                :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
              >
                <a-textarea
                  placeholder="请输入公司简介"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                  v-decorator="['orgBriefIntroduction']"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="其他信息" :bordered="false" style="width: 100%">
          <a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="法定代表人"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="[
                      'orgLegalRepresentative',
                      { rules: [{ required: false }] },
                    ]"
                    allowClear
                    placeholder="请输入法定代表人"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="经营状态"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-dict-select-tag
                    type="select"
                    dictCode="BusinessStatus"
                    placeholder="请选择经营状态"
                    v-decorator="['orgBusinessStatus']"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="成立日期"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-date
                    v-decorator="['orgDateIncorporation']"
                    style="width: 100%;"
                    :trigger-change="true"
                    placeholder="请选择成立日期"
                    dateFormat="YYYY-MM-DD"
                    allowClear
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="注册资本"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="[
                      'orgRegisteredCapital',
                      { rules: [{ required: false }] },
                    ]"
                    allowClear
                    placeholder="请输入注册资本"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="实缴资本"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="[
                      'orgPaidCapital',
                      { rules: [{ required: false }] },
                    ]"
                    allowClear
                    placeholder="请输入实缴资本"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="审核日期"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-date
                    placeholder="请选择审核/年检日期"
                    v-decorator="['orgAuditDate']"
                    style="width: 100%;"
                    :trigger-change="true"
                    dateFormat="YYYY-MM-DD"
                    allowClear
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="信用代码"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="['orgCreditCode']"
                    placeholder="请输入统一社会信用代码"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="机构代码"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="['orgOrganizationCode']"
                    placeholder="请输入组织机构代码"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col span="12">
                <a-form-item
                  label="纳税人识别号"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="['orgTaxpayerNumber']"
                    placeholder="请输入纳税人识别号"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="企业类型"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-dict-select-tag
                    type="select"
                    dictCode="EnterpriseType"
                    placeholder="请选择企业类型"
                    v-decorator="['orgEnterpriseType']"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col span="12">
                <a-form-item
                  label="营业期限"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="['orgBusinessTerm']"
                    placeholder="请输入营业期限"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="工商注册号"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="['orgIndustrialNo']"
                    placeholder="请输入工商注册号"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col span="12">
                <a-form-item
                  label="所属行业"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-dict-select-tag
                    type="select"
                    dictCode="Industry"
                    placeholder="请选择所属行业"
                    v-decorator="['orgIndustry']"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="登记机关"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="['orgRegistrationAuthority']"
                    placeholder="请输入登记机关"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col span="12">
                <a-form-item
                  label="行政区划"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="[
                      'orgAdministrativeDivision',
                      { rules: [{ required: false }] },
                    ]"
                    allowClear
                    placeholder="请选择行政区划"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="参保人数"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input-number
                    v-decorator="['orgInsuredNumber']"
                    :min="0"
                    placeholder="请输入参保人数"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col span="12">
                <a-form-item
                  label="曾用名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="[
                      'orgBeforeName',
                      { rules: [{ required: false }] },
                    ]"
                    allowClear
                    placeholder="请输入曾用名"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="注册地址"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input
                    v-decorator="[
                      'orgRegisteredAddress',
                      { rules: [{ required: false }] },
                    ]"
                    allowClear
                    placeholder="请输入注册地址"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-form-item
                label="经营范围"
                :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
              >
                <a-textarea
                  placeholder="请输入经营范围"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                  v-decorator="['orgNatureBusiness']"
                />
              </a-form-item>
            </a-row>
          </a-row>
        </a-card>
      </a-form>
    </a-spin>
  </inline-Modal>
</template>

<script>
import pick from "lodash.pick";
// 表单字段
const fields = [
  "uuid",
  "pid",
  "orgName",
  "orgPerson",
  "orgCode",
  "orgAbbreviation",
  "orgTelephone",
  "orgOfficialWebsite",
  "orgEmail",
  "orgAddress",
  "orgSort",
  "orgBriefIntroduction",
  "orgLegalRepresentative",
  "orgBusinessStatus",
  "orgDateIncorporation",
  "orgRegisteredCapital",
  "orgPaidCapital",
  "orgAuditDate",
  "orgCreditCode",
  "orgOrganizationCode",
  "orgTaxpayerNumber",
  "orgEnterpriseType",
  "orgBusinessTerm",
  "orgIndustrialNo",
  "orgIndustry",
  "orgRegistrationAuthority",
  "orgAdministrativeDivision",
  "orgInsuredNumber",
  "orgBeforeName",
  "orgRegisteredAddress",
  "orgNatureBusiness",
];
import { TDictSelectTag, DepartPopup, PersonnelPopup } from "@/components";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  components: {
    DepartPopup,
    PersonnelPopup,
    TDictSelectTag,
  },
  data() {
    return {
      title: "",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
      form: this.$form.createForm(this),
    };
  },
  methods: {
    add(m, data) {
      console.log(m, data);
    },
    edit(m, data) {
      console.log(m, data);
    },
  },
  mounted() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
};
</script>
<style scoped lang="less">
.modal-full-layout {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;

    .header-left {
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 16px;
      }

      .text {
        padding: 0 5px;
      }
    }
  }

  .main {
    flex: 1;
    overflow: scroll;
    padding: 10px;
  }
}
</style>
